{% extends 'dashboard/base.html' %}
{% load static %}

{% block body %}


        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-md-flex align-items-center">
                            <div>
                                <h5>Dockle Compliance Summary</h5>
                                <h5 class="card-subtitle"></h5>
                            </div>
                        </div>
                        <div class="row">
                            <!-- column -->
                            <div class="col-sm-6 col-md-6">
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered">
                                        <thead>
                                        <tr>
                                            <th>Audit</th>
                                            <th>Status</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td><a href="#">Total </a></td>
                                            <td><span class="badge badge-pill badge-dark">{% for data in all_compliance %}{{data.total_vuln}}{% endfor %}</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><a href="#">Failed </a></td>
                                            <td><span class="badge badge-pill badge-danger">{% for data in all_compliance %}{{data.dockle_fatal}}{% endfor %}</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><a href="#">Warn</a></td>
                                            <td><span class="badge badge-pill badge-orange">{% for data in all_compliance %}{{data.dockle_warn}}{% endfor %}</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><a href="#">Info</a></td>
                                            <td><span class="badge badge-pill badge-info">{% for data in all_compliance %}{{data.dockle_info}}{% endfor %}</span>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6">
                                <canvas id="webscans"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-md-flex align-items-center">
                            <div>
                                <h5>Audit List</h5>
                                <h5 class="card-subtitle"></h5>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <!-- column -->
                            <div class="col-lg-12">
                                <div class="table-responsive">
                                    <table id="zero_config" class="table table-striped table-bordered">
                                        <thead>
                                        <tr>
                                            <th>Code</th>
                                            <th>Title</th>
                                            <th>Level</th>
                                        </tr>
                                        </thead>
                                        <tbody>{% for data in dockle_all_vuln %}
                                        <tr data-target="#">
                                            <td><a href="https://github.com/goodwithtech/dockle/blob/master/CHECKPOINT.md#{{data.code}}" target="_blank">{{data.code}}</a></td>
                                            <td>{{data.title}}</td>
                                            <td><span class="badge badge-pill badge-{{data.vul_col}}">{{data.level}}</span></td>
                                        </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <div class="d-md-flex align-items-center">
                            <div>
                                <h5>Audit List</h5>
                                <h5 class="card-subtitle"></h5>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <!-- column -->
                            <div class="col-lg-12">
                                <div class="table-responsive">
                                    <table id="zero_config1" class="table table-striped table-bordered">
                                        <thead>
                                        <tr>
                                            <th>Title</th>
                                            <th>Alerts</th>

                                        </tr>
                                        </thead>
                                        <tbody>{% for data in dockle_all_audit %}
                                        <tr data-target="#">
                                            <td>
                                                {{data.title}}
                                            </td>
                                            <td>
                                                {{data.alerts}}
                                            </td>
                                        </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


<script type="text/javascript" src="{% static 'js/Chart.js' %}"></script>
<script type="text/javascript">
    var ctx = document.getElementById("webscans").getContext('2d');
    var webscans = new Chart(ctx, {
        type: 'doughnut',
        data: {
                    datasets: [{
                        data: [
                           {% for data in all_compliance %}{{data.dockle_fatal}}{% endfor %},
                            {% for data in all_compliance %}{{data.dockle_warn}}{% endfor %},
                            {% for data in all_compliance %}{{data.dockle_info}}{% endfor %},

                        ],
                        backgroundColor: [
                            '#db5565', '#fb8c00', '#2255a4'

                        ],
                        label: 'Venerability'
                    }],
                    labels: [
                        'Failed',
                        'Warning',
                        'Info',
                    ]
                },
        options: {
            responsive: true,
            title: {
                            display: true,
                            text: 'Compliance Summary'
                        }
        }
    });






</script>

{% endblock %}